<template>
  <div>
    <div class="prof-photo" :style="{
      backgroundImage: `url(${userData?.avatar})`
    }">
      
      <!-- <UserMsgLine name="公司" :value="userData?."></UserMsgLine> -->
    </div>
    <UserMsgLine name="房产" :value="userData?.houseNum?.toString()"></UserMsgLine>
    <UserMsgLine name="职业" :value="userData?.profession"></UserMsgLine>
    <UserMsgLine name="学历" :value="userData?.xueli"></UserMsgLine>
    <UserMsgLine name="收入" :value="userData?.income?.toString()"></UserMsgLine>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { SysState } from '@/store/sys';
import { recList } from './recommend.vue';
import { RecommendData } from '@/components/pages/recommend/RecCard.vue';
import UserMsgLine from '@/components/pages/home/userProfile/userMsgLine.vue';

export default defineComponent({
  created() {
    this.userId = this.$route.params.userId as string;
    this.userData = recList.find(e => e.id.toString() === this.userId);
    SysState.headerTitle = this.userData?.name ?? "";
  },
  setup() {
    return {
      userId: ref<string>(""),
      userData: ref<RecommendData>()
    };
  },
  components: { UserMsgLine }
})
</script>


<style lang="stylus" scoped>

.prof-photo
  width 100%
  height 5.3rem
  margin 0 auto
  background-color #F7F8FB
  background-size auto 100%
  background-repeat no-repeat
  background-position center center

</style>